<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <ul id="ul"></ul>
    <script src="template-web.js"></script>
    <script>
      btn.onclick = function () {
        const xhr = new XMLHttpRequest();
        xhr.open("get", "http://localhost:3000/test");
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            const arr = JSON.parse(xhr.responseText);
            console.log(arr);
            const res = template("myTemplate", { arr });
            console.log(res);
            ul.innerHTML = res;
          }
        };
      };
    </script>
    <script type="text/html" id="myTemplate">
    {{each arr}}
    <li>
        <h3>{{$value.id}}</h3>
        <p>{{$value.username}}</p>
        <p>{{$value.age}}</p>
        {{if $value.gender === 1}}
        <p>男</p>
        {{else}}
        <p>女</p>
        {{/if}}
        <ul>
            {{each $value.hobby v i}}
            <li>{{v}}</li>
            <li>{{$value.hobby}}</li>
            <li>{{i}}</li>
            {{/each}}
        </ul>
    </li>
    {{/each}}
    </script>
  </body>
</html>
